<template>
	<div class="dataBox">
		<!-- <div>
			<h3>切图数据</h3>
			<el-form ref="form" :model="form" label-width="80px">
			  <el-form-item label="题号">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="试题编号">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="截图编号">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="最高得分">
			    <el-input v-model="form.name"></el-input>
			  </el-form-item>
			  <el-form-item label="题型">
			    <el-select v-model="form.region" placeholder="请选择题型">
				  <el-option label="主观题" value="shanghai"></el-option>
				  <el-option label="单选题" value="beijing"></el-option>
				  <el-option label="多选题" value="beijing"></el-option>
				  <el-option label="准考证号" value="beijing"></el-option>
				  <el-option label="缺考标记" value="beijing"></el-option>
				  <el-option label="定位点" value="beijing"></el-option>
				  <el-option label="条形码" value="beijing"></el-option>
				  <el-option label="背面定位点" value="beijing"></el-option>
				</el-select>
			  </el-form-item>
			  <el-form-item label="步长">
			    <el-select v-model="form.region" placeholder="请选择步长">
			      <el-option label="1" value="shanghai"></el-option>
			      <el-option label="2" value="beijing"></el-option>
			      <el-option label="3" value="beijing"></el-option>
			      <el-option label="4" value="beijing"></el-option>
			      <el-option label="5" value="beijing"></el-option>
			      <el-option label="0.5" value="beijing"></el-option>
			      <el-option label="1.5" value="beijing"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item label="作文双评">
			    <el-switch v-model="form.delivery"></el-switch>
			  </el-form-item>
			</el-form>
		</div> -->
		<div>
		  <canvas ref="canvas" @mousedown="startDrawing" @mouseup="stopDrawing" @mousemove="draw" class="canvasbj" />
		  <img :src="imageSrc" ref="image" @load="onImageLoad" alt="Selectable Image"  style="display: none;" />
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: require('../../assets/image/cardmodle.jpg'), // 替换为你的图片路径
      canvas: null,
      ctx: null,
      image: null,
      isDrawing: false,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
		rectangles: [], // 存储所有圈选的矩形
		isDragging:false
    };
  },
  methods: {
	  onImageLoad() {
	      this.canvas = this.$refs.canvas;
	      this.ctx = this.canvas.getContext('2d');
	      
	      // 清除之前的绘制
	      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	      
	      this.image = this.$refs.image;
	  
	      this.canvas.width = this.image.width;
	      this.canvas.height = this.image.height;
	      this.ctx.drawImage(this.image, 0, 0);
	  },
	  
	  startDrawing(event) {
	      this.isDrawing = true;
	      this.startX = event.offsetX;
	      this.startY = event.offsetY;
	  },
	  
	  stopDrawing(event) {
	      if (this.isDrawing) {
	          this.isDrawing = false;
	          this.endX = event.offsetX;
	          this.endY = event.offsetY;
	  
	          // 保存矩形信息
	          this.rectangles.push({
	              x: this.startX,
	              y: this.startY,
	              width: this.endX - this.startX,
	              height: this.endY - this.startY,
	          });
	  
	          // 重新绘制所有矩形
	          this.redraw();
	      }
	  },
	  
	  draw(event) {
	      if (!this.isDrawing) return;
	  
	      // 清除之前的绘制
	      this.redraw();
	  
	      const rectX = this.startX;
	      const rectY = this.startY;
	      const rectWidth = Math.abs(event.offsetX - this.startX);
	      const rectHeight = Math.abs(event.offsetY - this.startY);
	      this.endX = event.offsetX;
	      this.endY = event.offsetY;
	  
	      // 绘制当前矩形
	      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
	      this.ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
	      this.ctx.strokeStyle = 'red';
	      this.ctx.strokeRect(rectX, rectY, rectWidth, rectHeight);
	  },
	  
	  redraw() {
	      // 清空画布
	      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	      
	      // 重新绘制背景图像
	      this.ctx.drawImage(this.image, 0, 0);
	  
	      // 绘制已保存的矩形
	      this.rectangles.forEach(rect => {
	          this.ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
	          this.ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
	          this.ctx.strokeStyle = 'red';
	          this.ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
	      });
	  }
  //   onImageLoad() {
  //     this.canvas = this.$refs.canvas;
  //     this.ctx = this.canvas.getContext('2d');
	 //  // 清除之前的绘制
	 // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
	 
  //     this.image = this.$refs.image;

  //     this.canvas.width = this.image.width;
  //     this.canvas.height = this.image.height;
  //     this.ctx.drawImage(this.image, 0, 0);
  //   },
  //   startDrawing(event) {
  //     this.isDrawing = true;
  //     this.startX = event.offsetX;
  //     this.startY = event.offsetY;
  //   },
  //   stopDrawing(event) {
  //     if (this.isDrawing) {
  //       this.isDrawing = false;
		// this.rectangles.push({
		//         x: this.startX,
		//         y: this.startY,
		//         width: this.endX - this.startX,
		//         height: this.endY - this.startY,
		//       });
  //       this.endX = event.offsetX;
  //       this.endY = event.offsetY;
		// // //console.info(this.rectangles)
  //       // //console.log(`Selected Area: (${this.startX}, ${this.startY}) to (${this.endX}, ${this.endY})`);
  //     }
  //   },
  //   draw(event) {
  //     if (!this.isDrawing) return;
  //     const rectX = this.startX;
  //     const rectY = this.startY;
  //     const rectWidth = Math.abs(event.offsetX - this.startX);
  //     const rectHeight = Math.abs(event.offsetY - this.startY);
	 //  this.endX = event.offsetX;
	 //  this.endY = event.offsetY;
	  
	 //  // 清除之前的绘制
	 //  this.ctx.fillStyle = 'rgba(0,0,0,0.8)';
	 //  this.ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
		// // 绘制当前矩形
		// this.ctx.strokeStyle = 'red';
		// this.ctx.strokeRect(rectX,rectY, rectWidth, rectHeight);
  //   }
  }
};
</script>

<style scoped>
canvas {
  border: 1px solid #000;
}
.dataBox{
	display: flex;
}
</style>